<template>
  <div class="books">
    <h1>小黑记事本</h1>
    <div class="info">
      <div class="inputbox">
        <input
          @keyup.enter="chengeInfo()"
          type="text"
          placeholder="请输入任务"
          v-model="info"
        />
        <button @click="chengeInfo()">添加任务</button>
      </div>
      <ul v-show="arrInfo.length > 0">
        <li v-for="(item, index) in arrInfo" :key="item.id">
          {{ index + 1 }}. <span>{{ item.renwu }}</span>
          <i @click="del(item.id)">X</i>
        </li>
      </ul>
      <div class="footer" v-show="arrInfo.length > 0">
        <span>合计：{{ arrInfo.length }}</span>
        <span style="cursor: pointer" @click="scl"> 清空任务 </span>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
let info = "";
let arrInfo = ref([
  { id: 1, renwu: "跑步锻炼1小时" },
  { id: 2, renwu: "跳绳锻炼3小时" },
]);

let chengeInfo = () => {
  arrInfo.value.push({ id: +new Date(), renwu: info });
};

const del = (id) => {
  arrInfo.value = arrInfo.value.filter((item) => item.id !== id);
};

const scl = () => {
  arrInfo.value = [];
};
</script>

<style lang="scss" scoped>
.books {
  width: 500px;
  background-color: #ccc;
  padding: 10px;
  h1 {
    color: brown;
    font-weight: normal;
    margin: 20px 0;
    text-align: center;
  }
  .info {
    padding: 10px;
    background-color: white;
    border-radius: 2px;
    .inputbox {
      border-radius: 5px;
      height: 50px;
      border: 1px solid brown;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding-left: 10px;
      input {
        border: none;
        outline: none;
        width: 100%;
        height: 48px;
      }

      button {
        width: 100px;
        height: 100%;
        border: none;
        border-radius: 0 5px 5px 0;
        background-color: brown;
        color: white;
        text-align: center;
      }
    }
    ul {
      padding: 2px;
      li {
        list-style: none;
        position: relative;
        border-bottom: 1px solid #33333338;
        padding: 10px;
        color: #a1a1a1;
        span {
          margin-left: 20px;
        }
        i {
          position: absolute;
          right: 20px;
          cursor: pointer;
          opacity: 0;
          transition: all 0.3s;
        }
        &:hover i {
          opacity: 1;
        }
      }
    }
    .footer {
      padding: 10px 20px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      color: #ccc;
      font-size: 12px;
    }
  }
}
</style>
